<template>
  <page-container title="资金流水" :showBack="true">
    <template v-slot:nav-left>
      <view class="nav-left" @click="goBack">
        <uni-icons type="left" size="20" color="#d4af37"></uni-icons>
      </view>
    </template>
    <view class="capital-flow-container">
      <!-- 顶部标签页 -->
      <view class="tab-header">
        <view class="tab-item" :class="{ active: activeTab === 'summary' }" @click="switchTab('summary')">
          <text class="tab-text">资金汇总</text>
          <view v-if="activeTab === 'summary'" class="tab-indicator"></view>
        </view>
        <view class="tab-item" :class="{ active: activeTab === 'application' }" @click="switchTab('application')">
          <text class="tab-text">申请记录</text>
          <view v-if="activeTab === 'application'" class="tab-indicator"></view>
        </view>
        <view class="tab-item" :class="{ active: activeTab === 'flow' }" @click="switchTab('flow')">
          <text class="tab-text">资金流水</text>
          <view v-if="activeTab === 'flow'" class="tab-indicator"></view>
        </view>
      </view>

      <!-- 资金汇总页面 -->
      <view class="tab-content" v-if="activeTab === 'summary'">
        <view class="summary-grid">
          <!-- 第一行 -->
          <view class="summary-card">
            <text class="summary-value" :class="formattedBalances.balance.cssClass">{{
              formattedBalances.balance.value }}</text>
            <text class="summary-label">可用定金(元)</text>
          </view>
          <view class="summary-card">
            <text class="summary-value" :class="formattedBalances.nowBalance.cssClass">{{
              formattedBalances.nowBalance.value }}</text>
            <text class="summary-label">实时余额(元)</text>
          </view>
          <view class="summary-card">
            <text class="summary-value" :class="formattedBalances.accountBalance.cssClass">{{
              formattedBalances.accountBalance.value }}</text>
            <text class="summary-label">账户余额(元)</text>
          </view>
          
          <!-- 第二行 -->
          <view class="summary-card">
            <text class="summary-value" :class="formattedBalances.payedRetainer.cssClass">{{
              formattedBalances.payedRetainer.value }}</text>
            <text class="summary-label">已用定金(元)</text>
          </view>
          <view class="summary-card">
            <text class="summary-value" :class="formattedBalances.unPayedDifference.cssClass">{{
              formattedBalances.unPayedDifference.value }}</text>
            <text class="summary-label">未结算差价(元)</text>
          </view>
          <view class="summary-card">
            <text class="summary-value" :class="formattedBalances.payedDifference.cssClass">{{
              formattedBalances.payedDifference.value }}</text>
            <text class="summary-label">已结差价(元)</text>
          </view>
        </view>
      </view>

      <!-- 申请记录页面 -->
      <view class="tab-content" v-if="activeTab === 'application'">
        <view class="application-list">
          <view class="application-item" v-if="applicationList.length > 0">
            <view class="flow-item" v-for="(item, index) in applicationList" :key="index" @click="viewDetail(item)">
              <view class="flow-left">
                <view class="flow-icon">
                  <img src="/static/index/gold-bar.png" alt="" srcset="" style="width: 60rpx; height: 60rpx;">
                </view>
                <view class="flow-info">
                  <text class="flow-title">{{ item.cusName }}</text>
                  <text class="flow-desc">{{ getTradeTypeLabel(item.tradeType) }}</text>
                  <text class="flow-order" v-if="item.weight">克重: {{ item.weight || '--' }} 单价 {{ item.price || '--' }}</text>
                  <text class="flow-time">{{ item.tradeTime }}</text>
                </view>
              </view>
              <view class="flow-right">
                <!-- :class="getAmountClass(item.amount)" -->
                <text class="flow-amount" >
                  {{ formatAmount(item.amount) }}
                </text>
                <text class="flow-status" :class="TRADE_STATUS_STYLE[item.tradeStatus]">
                  {{ getTradeStatusLabel(item.tradeStatus) }}
                </text>
              </view>
            </view>
          </view>
          <view class="empty-state" v-if="applicationList.length === 0">
            <text class="empty-text">暂无申请记录</text>
          </view>
        </view>
      </view>

      <!-- 资金流水页面 -->
      <view class="tab-content" v-if="activeTab === 'flow'">
        <!-- 筛选区域 -->
        <view class="filter-section" v-if="false">
          <view class="filter-item" @click="showTimePicker = true">
            <text class="filter-label">时间</text>
            <text class="filter-value">{{ selectedTime }}</text>
            <text class="filter-arrow">▼</text>
          </view>
          <view class="filter-item" @click="showTypePicker = true">
            <text class="filter-label">类型</text>
            <text class="filter-value">{{ selectedType }}</text>
            <text class="filter-arrow">▼</text>
          </view>
        </view>

        <!-- 订单号筛选 -->
        <view class="order-filter-section" v-if="false">
          <view class="order-filter-container">
            <input class="order-input" v-model="orderNumber" placeholder="请输入订单号后6位数" maxlength="6" type="number"
              @keypress="onOrderInputKeypress" />
            <button class="filter-button" @click="filterByOrderNumber">
              <text class="button-text">筛选</text>
            </button>
          </view>
        </view>

        <!-- 流水列表 -->
        <view class="flow-list">
          <view class="list-header">
            <text class="header-title">资金流水</text>
            <view class="header-right">
              <text class="header-count">共{{ total }}条记录</text>
              <text class="clear-filter" @click="clearFilters" v-if="filteredFlowList.length > 0">清除筛选</text>
            </view>
          </view>

          <view class="flow-items">
            <view class="flow-item" v-for="(item, index) in displayFlowList" :key="index" @click="viewDetail(item)">
              <view class="flow-left">
                <view class="flow-icon">
                  <img src="/static/index/gold-bar.png" alt="" srcset="" style="width: 60rpx; height: 60rpx;">
                </view>
                <view class="flow-info">
                  <!-- <text class="flow-title">{{ item.cusName }}</text> -->
                  <text class="flow-desc">{{ getTradeTypeLabel(item.tradeType) }}</text>
                  <text class="flow-desc" v-if="item.price">克重: {{ item.weight || '--' }} 单价 {{ item.price || '--' }}</text>
                  <text class="flow-desc">余额：{{ formatAmount(item.balance) }}</text>
                  <text class="flow-time">{{ item.tradeTime }}</text>
                </view>
              </view>
              <view class="flow-right">
                <!-- :class="getAmountClass(item.amount)" -->
                <text class="flow-amount" >
                  {{ formatAmount(item.amount)   }}
                </text>
                <text class="flow-status" :class="TRADE_STATUS_STYLE[item.tradeStatus]">
                  {{ getTradeStatusLabel(item.tradeStatus) }}
                </text>
                
              </view>
            </view>
          </view>

          <!-- 加载更多提示 -->
          <view class="load-more" v-if="displayFlowList.length > 0">
            <view v-if="loading" class="loading-text">
              <text>加载中...</text>
            </view>
            <view v-else-if="hasMore" class="load-more-text">
              <text>上拉加载更多</text>
            </view>
            <view v-else class="no-more-text">
              <text>没有更多数据了</text>
            </view>
          </view>

          <!-- 空状态 -->
          <view class="empty-state" v-if="displayFlowList.length === 0 && !loading">
            <text class="empty-text">暂无流水记录</text>
          </view>
        </view>
      </view>

      <!-- 时间选择器弹窗 -->
      <view class="picker-modal" v-if="showTimePicker" @click="showTimePicker = false">
        <view class="picker-content" @click.stop>
          <view class="picker-header">
            <text class="picker-title">选择时间</text>
            <text class="picker-close" @click="showTimePicker = false">×</text>
          </view>
          <view class="picker-options">
            <view class="picker-option" v-for="time in timeOptions" :key="time.value"
              :class="{ active: selectedTimeValue === time.value }" @click="selectTime(time.value)">
              <text class="option-text">{{ time.label }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 类型选择器弹窗 -->
      <view class="picker-modal" v-if="showTypePicker" @click="showTypePicker = false">
        <view class="picker-content" @click.stop>
          <view class="picker-header">
            <text class="picker-title">选择类型</text>
            <text class="picker-close" @click="showTypePicker = false">×</text>
          </view>
          <view class="picker-options">
            <view class="picker-option" v-for="type in typeOptions" :key="type.value"
              :class="{ active: selectedTypeValue === type.value }" @click="selectType(type.value)">
              <text class="option-text">{{ type.label }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </page-container>
</template>

<script>
import {
  TIME_FILTER_OPTIONS,
  TYPE_FILTER_OPTIONS,
  TRADE_STATUS_STYLE,
  getTradeTypeLabel,
  getTradeStatusLabel
} from '@/utils/enums'

export default {
  name: 'CapitalFlowPage',
  data() {
    return {
      summaryData: {},
      getTradeTypeLabel,
      getTradeStatusLabel,
      activeTab: 'summary', // 默认显示资金汇总
      showTimePicker: false,
      showTypePicker: false,
      selectedTimeValue: 'all',
      selectedTypeValue: 'all',
      orderNumber: '', // 订单号筛选
      timeOptions: TIME_FILTER_OPTIONS,
      typeOptions: TYPE_FILTER_OPTIONS,
      TRADE_STATUS_STYLE,
      flowList: [],
      filteredFlowList: [],
      page: 1,
      size: 20,
      total: 0,
      applicationList: [],
      applicationTotal: 0,
      loading: false, // 加载状态
      hasMore: true, // 是否还有更多数据
	  formattedBalances: {
	  		balance: { value: '--', cssClass: '' },
	  		nowBalance: { value: '--', cssClass: '' },
	  		accountBalance: { value: '--', cssClass: '' },
	  		payedRetainer: { value: '--', cssClass: '' },
	  		unPayedDifference: { value: '--', cssClass: '' },
	  		payedDifference: { value: '--', cssClass: '' }
	   },
    }
  },
  computed: {
    selectedTime() {
      const option = this.timeOptions.find(item => item.value === this.selectedTimeValue)
      return option ? option.label : '全部时间'
    },
    selectedType() {
      const option = this.typeOptions.find(item => item.value === this.selectedTypeValue)
      return option ? option.label : '全部类型'
    },
    // 获取筛选后的流水列表
    displayFlowList() {
      return this.flowList
    },
  },
  watch: {
    orderNumber(newVal) {
      if (newVal.length === 6) {
        // 自动触发筛选
        this.filterByOrderNumber()
      }
    }
  },
  onShow() {
    this.getSummaryData()
  },
  onLoad() {
    console.log('资金流水页面加载')
  },
  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.page++;
      this.getFlowList();
    }
  },
  onPullDownRefresh() {
    // 下拉刷新
    if (this.activeTab === 'flow') {
      this.page = 1
      this.flowList = []
      this.hasMore = true
      this.getFlowList().then(() => {
        uni.stopPullDownRefresh(); // 停止刷新动画
      })
    } else {
      uni.stopPullDownRefresh()
    }
  },
  methods: {
    goBack() {
      setTimeout(() => {
        uni.navigateBack()
      }, 100)
    },
   /* getSummaryData() {
      this.$http.get('/applet/customer/count').then(res => {
        this.summaryData = res.data
      })
    }, */
	getSummaryData() {
	  this.$http.get('/applet/customer/count').then(res => {
	    this.summaryData = res.data
	    // 计算格式化后的金额和CSS类
	    Object.keys(this.formattedBalances).forEach(key => {
	      if (this.summaryData[key] !== undefined) {
	        const formattedValue = this.formatAmount(this.summaryData[key])
	        this.formattedBalances[key] = {
	          value: formattedValue,
	          cssClass: this.getAmountClass(formattedValue)
	        }
	      }
	    })
	  })
	},
	
    // 金额千分符
    formatAmount(amount) {
      if (!amount && amount !== 0) return '--'
      if (amount === 0) return '0.00'

      // 转换为数字并保留两位小数
      const num = parseFloat(amount)
      if (isNaN(num)) return '--'

      // 如果金额很大，使用K、M等单位
      // if (num >= 100000000) {
      //   return (num / 100000000).toFixed(2) + '亿'
      // } else if (num >= 10000) {
      //   return (num / 10000).toFixed(2) + '万'
      // } else {
      // 普通金额，添加千分符并保留两位小数
      return num.toLocaleString('zh-CN', {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
      })
      // }
    },

    // 根据金额长度返回CSS类
    getAmountClass(amount) {
      if (!amount || amount === '--') return ''

      const length = amount.toString().length
      if (length > 12) {
        return 'very-long-amount'
      } else if (length > 8) {
        return 'long-amount'
      }
      return 'long-amount'
    },
    getApplicationList() {
      let customerInfo = uni.getStorageSync('customerInfo')
      let params = {
        current: this.page,
        size: this.size,
        cusId: customerInfo.id || '',
        tradeStatus: 'AUDITING',
      }
      this.$http.post('/applet/customer/capital/list', params).then(res => {
        console.log(res.data, '获取申请记录')
        this.applicationList = res.data.records || []
        this.applicationTotal = res.data.total || 0
      })
    },
    getFlowList() {
      this.loading = true;
      let customerInfo = uni.getStorageSync('customerInfo')
      let params = {
        current: this.page,
        size: this.size,
        cusId: customerInfo.id || '',
        // tradeType: this.selectedTypeValue || '',
        tradeStatus: 'AUDIT_PASS',
        // materialType: this.selectedTimeValue || '',
        // minTradeTime: this.orderNumber || ''
        // maxTradeTime: this.orderNumber || ''
      }
      this.$http.post('/applet/customer/capital/list', params).then(res => {
        console.log(res.data, '获取资金流水')
        const newRecords = res.data.records || []

        if (this.page === 1) {
          // 首次加载，直接替换数据
          this.flowList = newRecords
        } else {
          // 分页加载，追加数据
          this.flowList = [...this.flowList, ...newRecords]
        }

        this.total = res.data.total || 0
        this.hasMore = this.page * this.size < this.total
        uni.stopPullDownRefresh(); // 停止刷新动画
      }).catch(err => {
        console.error('获取资金流水失败:', err)
        uni.showToast({
          title: '获取资金流水失败',
          icon: 'none'
        })
      }).finally(() => {
        this.loading = false
      })
    },
    switchTab(tab) {
      this.activeTab = tab
      console.log('切换到标签页:', tab)
      if (tab === 'flow') {
        // 重置分页状态
        this.page = 1
        this.flowList = []
        this.hasMore = true
        this.getFlowList()
      }
      if (tab === 'summary') {
        this.getSummaryData()
      }
      if (tab === 'application') {
        this.getApplicationList()
      }
    },
    selectTime(value) {
      this.selectedTimeValue = value
      this.showTimePicker = false
      this.applyFilters()
    },
    selectType(value) {
      this.selectedTypeValue = value
      this.showTypePicker = false
      this.applyFilters()
    },
    // 订单号筛选
    filterByOrderNumber() {
      if (!this.orderNumber.trim()) {
        uni.showToast({
          title: '请输入订单号',
          icon: 'none'
        })
        return
      }

      if (this.orderNumber.length < 6) {
        uni.showToast({
          title: '请输入完整的6位订单号',
          icon: 'none'
        })
        return
      }

      this.applyFilters()
      uni.showToast({
        title: '筛选完成',
        icon: 'success'
      })
    },
    // 监听订单号输入变化
    onOrderInputKeypress(event) {
      const keyCode = event.keyCode;
      if (keyCode < 48 || keyCode > 57) { // 只允许数字键
        event.preventDefault();
      }
    },
    // 应用所有筛选条件
    applyFilters() {
      // 筛选时重置分页状态
      this.page = 1
      this.flowList = []
      this.hasMore = true

      let filtered = [...this.flowList]

      // 时间筛选
      if (this.selectedTimeValue !== 'all') {
        // 这里可以根据实际需求实现时间筛选逻辑
        console.log('时间筛选:', this.selectedTimeValue)
      }

      // 类型筛选
      if (this.selectedTypeValue !== 'all') {
        filtered = filtered.filter(item => item.type === this.selectedTypeValue)
      }

      // 订单号筛选
      if (this.orderNumber.trim()) {
        filtered = filtered.filter(item =>
          item.orderNumber && item.orderNumber.includes(this.orderNumber)
        )
      }

      this.filteredFlowList = filtered
      console.log('筛选结果:', {
        time: this.selectedTimeValue,
        type: this.selectedTypeValue,
        orderNumber: this.orderNumber,
        resultCount: filtered.length
      })

      // 重新获取数据
      this.getFlowList()
    },
    // 清除所有筛选条件
    clearFilters() {
      this.selectedTimeValue = 'all'
      this.selectedTypeValue = 'all'
      this.orderNumber = ''
      this.filteredFlowList = []

      // 清除筛选后重置分页状态并重新获取数据
      this.page = 1
      this.flowList = []
      this.hasMore = true
      this.getFlowList()

      console.log('清除所有筛选条件')
    },
    filterFlowList() {
      this.applyFilters()
    },
    viewDetail(item) {
      console.log('查看详情:', item)
    
    }
  },

}
</script>

<style scoped lang="scss">
@import '@/uni.scss';

.capital-flow-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 0;
}

/* 标签页样式 */
.tab-header {
  background-color: #ffffff;
  display: flex;
  border-bottom: 1rpx solid #e0e0e0;
  position: relative;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 30rpx 20rpx;
  position: relative;
  transition: all 0.3s ease;
}

.tab-text {
  font-size: 28rpx;
  color: #666666;
  transition: color 0.3s ease;
}

.tab-item.active .tab-text {
  color: #0B1F20;
  font-weight: bold;
}

.tab-indicator {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 4rpx;
  background-color: #0B1F20;
  border-radius: 2rpx;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) scaleX(0);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) scaleX(1);
  }
}

/* 标签页内容 */
.tab-content {
  padding: 20rpx 26rpx;
}

/* 资金汇总网格 */
.summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20rpx;
}

/* 响应式调整 */
@media screen and (max-width: 750rpx) {
  .summary-grid {
    gap: 15rpx;
  }

  .summary-card {
    padding: 25rpx 15rpx;
    min-height: 140rpx;
  }

  .summary-value {
    font-size: 32rpx;
  }

  .summary-value.long-amount {
    font-size: 26rpx;
  }

  .summary-value.very-long-amount {
    font-size: 22rpx;
  }
}

.summary-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx 20rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 160rpx;
  overflow: hidden;
}

.summary-value {
  font-size: 36rpx;
  color: #d4af37;
  font-weight: bold;
  margin-bottom: 10rpx;
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  transition: font-size 0.3s ease;
}

/* 当金额较长时自动调整字体大小 */
.summary-value.long-amount {
  font-size: 28rpx;
}

.summary-value.very-long-amount {
  font-size: 24rpx;
}

.summary-label {
  font-size: 24rpx;
  color: #0B1F20;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 2rpx;
}

/* 申请记录空状态 */
.application-list {
  background-color: #ffffff;
  border-radius: 16rpx;
  // padding: 20rpx 30rpx 60rpx 30rpx;
}

/* 空状态 */
.empty-state {
  padding: 80rpx 30rpx;
  text-align: center;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
}

/* 筛选区域 */
.filter-section {
  background-color: #ffffff;
  padding: 30rpx;
  display: flex;
  gap: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.filter-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #f8f8f8;
  border-radius: 12rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

.filter-item:active {
  background-color: #f0f0f0;
  border-color: $uni-text-color-orange;
}

.filter-label {
  font-size: 28rpx;
  color: #666666;
}

.filter-value {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
}

.filter-arrow {
  font-size: 24rpx;
  color: #999999;
}

/* 订单号筛选区域 */
.order-filter-section {
  background-color: #ffffff;
  padding: 20rpx 26rpx;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
}

.order-filter-container {
  display: flex;
  gap: 20rpx;
  align-items: center;
}

.order-input {
  flex: 1;
  height: 80rpx;
  padding: 0 26rpx;
  background-color: #F5F5F6;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #0B1F20;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

.order-input:focus {
  border-color: $uni-text-color-orange;
  background-color: #ffffff;
}

.order-input::placeholder {
  color: #999999;
}

.filter-button {
  width: 120rpx;
  height: 80rpx;
  background: linear-gradient(135deg, #d4af37 0%, #f4d03f 100%);
  border-radius: 12rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.filter-button:active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 8rpx rgba(212, 175, 55, 0.4);
}

.button-text {
  font-size: 28rpx;
  color: #1a1a1a;
  font-weight: bold;
}

/* 统计卡片 */
.stats-section {
  margin-bottom: 20rpx;
}

.stats-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 20rpx 26rpx;
}

.stats-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 2rpx solid #EEEEEE;
}

.stats-item:last-child {
  border-bottom: none;
}

.stats-label {
  font-size: 28rpx;
  color: #999999;
}

.stats-value {
  font-size: 32rpx;
  font-weight: bold;
}

.stats-value.income {
  color: $uni-text-color-green;
}

.stats-value.expense {
  color: $uni-text-color-red;
}

.stats-value.balance {
  color: #333333;
}

/* 流水列表 */
.flow-list {
  background-color: #ffffff;
  border-radius: 16rpx;
  overflow: hidden;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid #EEEEEE;
}

.header-title {
  font-size: 32rpx;
  color: #0B1F20;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.header-count {
  font-size: 24rpx;
  color: #999999;
}

.clear-filter {
  font-size: 24rpx;
  color: $uni-text-color-orange;
  text-decoration: underline;
  padding: 10rpx;
}

.flow-items {
  padding: 0;
}

.flow-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 2rpx solid #EEEEEE;
  transition: all 0.3s ease;
}

.flow-item:last-child {
  border-bottom: none;
}

.flow-item:active {
  background-color: #f8f8f8;
}

.flow-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.flow-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  font-size: 32rpx;
}

.flow-icon.recharge {
  background-color: #e3f2fd;
}

.flow-icon.withdraw {
  background-color: #fff3e0;
}

.flow-icon.trade {
  background-color: #e8f5e8;
}

.flow-icon.fee {
  background-color: #fce4ec;
}

.flow-icon.reward {
  background-color: #f3e5f5;
}

.flow-info {
  flex: 1;
}

.flow-title {
  display: block;
  font-size: 30rpx;
  color: #0B1F20;
  margin-bottom: 8rpx;
}

.flow-desc {
  display: block;
  font-size: 24rpx;
  color: #666666;
  margin-bottom: 8rpx;
}

.flow-time {
  display: block;
  font-size: 22rpx;
  color: #999999;
}

.flow-order {
  display: block;
  font-size: 22rpx;
  color: #999999;
  margin-top: 8rpx;
}

.flow-right {
  text-align: right;
}

.flow-amount {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
  max-width: 200rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}

.flow-amount.income {
  color: $uni-text-color-green;
}

.flow-amount.expense {
  color: $uni-text-color-red;
}

.flow-status {
  display: block;
  font-size: 22rpx;
  // padding: 4rpx 12rpx;
  border-radius: 8rpx;
  text-align: center;
  display: inline-block;
  width: 80rpx;
  text-align: center;
  height: 40rpx;
  line-height: 40rpx;
}

.flow-status.success {
  background-color: #e8f5e8;
  color: $uni-text-color-green;
}

.flow-status.pending {
  background-color: #fff3e0;
  color: $uni-text-color-orange;
}

.flow-status.failed {
  background-color: #ffebee;
  color: $uni-text-color-red;
}

/* 加载更多提示 */
.load-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx 0;
  color: #999999;
  font-size: 24rpx;
}

.loading-text {
  color: #666666;
  display: flex;
  align-items: center;
}

.loading-text::before {
  content: '';
  width: 30rpx;
  height: 30rpx;
  border: 2rpx solid #e0e0e0;
  border-top: 2rpx solid #666666;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 10rpx;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.load-more-text {
  color: #999999;
}

.no-more-text {
  color: #cccccc;
}

/* 弹窗样式 */
.picker-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  z-index: 999;
}

.picker-content {
  width: 100%;
  background-color: #ffffff;
  border-radius: 20rpx 20rpx 0 0;
  padding: 40rpx 30rpx;
  max-height: 60vh;
}

.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40rpx;
}

.picker-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: bold;
}

.picker-close {
  font-size: 40rpx;
  color: #999999;
  padding: 10rpx;
}

.picker-options {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.picker-option {
  padding: 30rpx;
  border-radius: 12rpx;
  border: 2rpx solid transparent;
  transition: all 0.3s ease;
}

.picker-option.active {
  background-color: #fff3e0;
  border-color: $uni-text-color-orange;
}

.option-text {
  font-size: 28rpx;
  color: #333333;
}

.picker-option.active .option-text {
  color: $uni-text-color-orange;
  font-weight: bold;
}
</style>
